<template>
    <div class="news">
        <!-- 导航区 -->
        <ul>
            <li v-for="news in newsList" :key="news.id">
                <!-- 第一种写法 -->
                <!-- <router-link :to="`/news/detail?id=${news.id}&title=${news.title}`">{{ news.title }}</router-link> -->
                 <!-- 第二种写法 -->
                <router-link :to="{
                    // path:'/news/detail',
                    name:'xiang',
                    params:{
                        id:news.id,
                        title:news.title,
                        content:news.content
                    },
                    query:{
                        id:news.id,
                        title:news.title,
                        content:news.content
                    }
                }">{{ news.title }}</router-link>
            </li>
        </ul>
        <!-- 展示区 -->
         <div class="news-content">
            <router-view></router-view>
         </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const newsList=reactive([
    {id:'a1',title:'t1',content:'content1'},
    {id:'a2',title:'t2',content:'content2'},
    {id:'a3',title:'t3',content:'content3'},
    {id:'a4',title:'t4',content:'content4'},
])

// 使用这个函数来修改组件名
defineOptions({
  name: "News"
})
</script>

<style>
.head{
    background-color: yellowgreen;
}
</style>